<template>
  <div class="f_page">
    <div class="f_yemian">
      <div class="title">采购计划</div>
      <div class="top">
        <div class="shuru">
          <!--  <div>供应商简称</div> -->
          <el-input class="neirong"
                    v-model="input_1"
                    placeholder="供应商名称"></el-input>
          <el-date-picker class="neirong"
                          v-model="value4"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"></el-date-picker>
          <!--    <el-button class="anniu"
          type="primary">搜索</el-button>-->
        </div>
        <el-select v-model="value2"
                   placeholder="供应商类别"
                   clearable
                   class="xuanze">
          <el-option v-for="item in d_lb"
                     :key="item.id"
                     :label="item.typeName"
                     :value="item.id"></el-option>
        </el-select>
        <el-select v-model="value3"
                   placeholder="计划状态"
                   clearable
                   class="xuanze">
          <el-option v-for="item in d_zt"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>

        <el-button class="anniu"
                   type="primary"
                   @click="lb_list">搜索</el-button>

        <el-button class="anniu_caigou"
                   type="primary"
                   @click="xz_caigou">新增采购单</el-button>
      </div>
      <div class="zhongbu">
        <div class="biao">
          <template>
            <el-table :data="list"
                      border
                      style="width: 100%">
              <el-table-column type="index"
                               label="序号"></el-table-column>
              <el-table-column prop="purchaseId"
                               label="采购单号"></el-table-column>
              <el-table-column prop="supplierNameShort"
                               label="供应商简称"></el-table-column>

              <el-table-column prop="typeNum"
                               label="采购品种数量"></el-table-column>
              <el-table-column prop="createTime"
                               label="计划日期"></el-table-column>
              <el-table-column prop="eliveryTime"
                               label="供货日期"></el-table-column>
              <el-table-column prop="planPrice"
                               label="计划金额"></el-table-column>
              <el-table-column prop="supervisorName"
                               label="制单人"></el-table-column>
              <el-table-column prop="status"
                               label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">计划</span>
                  <span v-if="scope.row.status == 1">发出</span>
                  <span v-if="scope.row.status == 2">供货</span>
                  <span v-if="scope.row.status == 3">完成</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right"
                               label="操作"
                               width="200">
                <template slot-scope="scope">
                  <el-button size="mini"
                             type="primary"
                             @click="xiangqin(scope.row)">明细</el-button>
                  <el-button size="mini"
                             type="info"
                             @click="shanchu(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>

      <el-dialog width="500px"
                 title="新增供应商"
                 :visible.sync="tanchuang">
        <el-form :model="form">
          <el-form-item label="下单人："
                        :label-width="formLabelWidth">
            <div>测试人物</div>
          </el-form-item>
          <el-form-item label="选择供应商"
                        :label-width="formLabelWidth">
            <el-select v-model="form.gonyin">
              <el-option v-for="item in gonyin_zhi"
                         placeholder="选择供应商"
                         :key="item.supplierId"
                         :label="item.supplierNameShort"
                         :value="item.supplierId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="tanchukuang"
                        label="收货地址"
                        :label-width="formLabelWidth">
            <el-input class="tc_sr"
                      v-model="form.address"
                      value="address"></el-input>
          </el-form-item>
          <el-form-item name="fucck"
                        label="供货日期"
                        :label-width="formLabelWidth">
            <el-date-picker class="tc_sr"
                            v-model="form.eliveryTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="tanchuang = false">取 消</el-button>
          <el-button type="primary"
                     @click="quedin">立即创建</el-button>
        </div>
      </el-dialog>
      <el-pagination class="fanye"
                     background
                     :page-size="1"
                     layout="prev, pager, next"
                     @current-change="fanye"
                     :total="this.total"></el-pagination>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  caigou_list,
  caigou_cx,
  goodQuery,
  gonyin_liebiao,
  cg_xinzen,
  cg_lb_sc
} from "@/api/gonyin.js";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      tanchuang: false,
      formLabelWidth: "120px",
      input: "",
      d_lb: [],
      d_zt: [
        { label: "计划中", value: 0 },
        { label: "发出", value: 1 },
        { label: "供货", value: 2 },
        { label: "完成", value: 3 }
      ],
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      input_1: "",
      input_2: "",
      list: [],
      page: 1,
      value: "",
      total: 1,
      //当前页面
      gonyin_zhi: [],
      form: { eliveryTime: "", address: "番禺分拣中心", gonyin: "" },
      shangpin: [],
      pagezs: "",
      //下单人
      xiadan: 1
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //新增采购单弹窗
    xz_caigou() {
      this.tanchuang = true;
    },
    //新增确定
    quedin() {
      if (this.form.gonyin == "") {
        this.$message("请选择供应商");
      } else if (this.form.address == "") {
        this.$message("请输入供应地址");
      } else if (this.form.eliveryTime == "") {
        this.$message("请选择供货日期");
      } else {
        let data = {
          supervisorId: this.xiadan,
          supplierId: this.form.gonyin,
          address: this.form.address,
          eliveryTime: this.form.eliveryTime
        };
        console.log(this.form, "6666");
        cg_xinzen(data).then(res => {
          if (res.data !== 0) {
            this.tanchuang = false;
            console.log(res, "新增成功");
            this.$router.push({
              name: "caigou_minxi",
              query: { id: res.data, zhi: true }
            });
          }
        });
      }
    },
    //供应商请求
    remoteMethod() {
      let data = {};
      caigou_cx(data).then(res => {
        console.log(res);
        this.gonyin_zhi = res.rows;
        console.log(res.rows, "供应商");
      });
    },
    /* 查看供应商 */
    chakan(res) {},
    /* 进入详情*/
    xiangqin(res) {
      console.log(res);
      this.$router.push({
        name: "caigou_minxi",
        query: { id: res.purchaseId, zhi: res.status == 0 ? true : false }
      });
      console.log("进入详情");
    },
    /* 删除当前元素*/
    shanchu(index) {
      console.log(this.list);
      console.log(index);
      let id = this.list[index].purchaseId;
      this.$confirm("此操作将删除该采购单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = { purchaseId: id };
          cg_lb_sc(data).then(res => {
            if (res.data == true) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.list.splice(index, 1);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //页面请求供应商级别
    //页面请求供应商类别
    gonyin_liebiao() {
      gonyin_liebiao().then(res => {
        console.log(res);
        this.d_lb = res.rows;
      });
    },
    //翻页
    fanye(res) {
      console.log(res, "66666");
      this.page = Number(res);
      this.lb_list();
    },
    //
    handleChange(value) {
      /*    console.log(value);
      console.log(f1); */
    },
    handleClick() {
      console.log("123456");
      /* console.log(row); */
    },
    //页面请求详情
    lb_list() {
      let data = {
        supplierType: this.value2,
        status: this.value3,
        supplierNameShort: this.input_1,
        date: this.value4,
        pageNo: this.page
      };
      caigou_list(data).then(response => {
        this.list = response.rows;
        this.total = Number((response.total / response.pageSize).toFixed(0));
        console.log(response);
        console.log(this.total, "总页数");
      });
    },
    commodity() {
      let data = {};
      goodQuery(data).then(res => {
        console.log(res, "商品列表");
        this.shangpin = res.rows;
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.lb_list();
    this.gonyin_liebiao();
    this.remoteMethod();
    this.commodity();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.fanye {
  display: flex;
  justify-content: center;
  width: auto;
}
.f_page {
  display: flex;
  justify-content: center;
  .f_yemian {
    display: flex;
    width: 95%;
    flex-direction: column;
    .title {
      font-size: 20px;
      margin: 20px 0px 20px 20px;
    }
    .top {
      display: flex;
      width: 100%;
      height: auto;
      .shuru {
        display: inline-flex;
        width: auto;
        align-items: center;
        .neirong {
          width: 200px;
          margin-left: 20px;
        }
      }
      .anniu {
        margin-left: 20px;
      }
      .anniu_caigou {
        margin-left: 200px;
      }
      .xuanze {
        margin-left: 20px;
      }
    }
    .zhongbu {
      .biao {
        width: 100%;
        margin-top: 50px;
      }
    }
  }
}
.tc_sr {
  width: 200px;
}
</style>
